
#app-main{
  &.blueTechnologyTheme {
  width: 100%;
  height: calc(100vh - 50px);
  min-width: 1334px;
  background: url(~@/assets/static/image/main-bg.jpg) no-repeat center center;
  background-size: cover;
  overflow: auto;
  padding-bottom: 30px;

  // 中间部分样式
  .el-main{
    padding: 0!important;
    padding-top: 10px!important;

      .main-panel{
          width: 100%;
      }

      img {
          width : 100%;
      }
  }

  // 左右两个侧边图表的样式
  .el-aside{
    &.left{
      width: 23.4%!important;
      margin: 10px 1%;

      .left-side{
          width: 100%;
          margin-bottom: 2%;

          &-bg {
              width: 100%;
              height: 100%;
          }

          &:first-child {
              height: 63%;
          }

          &:last-child {
              height: 33%;
          }

          .server{
              height: 88.450%;

              &-list{
                  display: flex;
                  justify-content: space-between;
              }

              &-text-list{
                  width: 90%;

                  p{
                      display: flex;
                      color: #fff;
                      font-size: 14px;
                      margin: 5px 0;
                      width: 100%;

                  }

                  p>span{
                      flex:1;
                      width: 50%;
                      display: inline-block;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;

                      &:hover{
                          text-overflow:inherit;
                          text-overflow:inherit;
                          text-overflow:inherit;
                          overflow: visible;
                          overflow: visible;
                          overflow: visible;
                          white-space: pre-line;
                      }
                  }
              }
          }

          &>div{
              position: absolute;
              width: 90%;
              left: 5%;
              top: 5%;
          }
      }
    }
    &.right{
      width: 23.4%!important;
      margin: 10px 1%;

      .right-side{
          width: 100%;
          margin-bottom: 2%;

          &-bg {
              width: 100%;
              height: 100%;
          }
          &:first-child {
              height: 48%;
          }

          &:last-child {
              height: 48%;
          }

          &>div {
              position: absolute;
          }
      }
    }

    img{
        width: 100%;
    }

    &>div {
        position: relative;
    }

    &>div>div {
        position: absolute;
    }

    .csgl{
      width: 90%;
      height: 82.78%;
      top:10%;
      left: 5%;
    }

    .hgjj {
        &-list {
            &>div{
                display: flex;
                color: #fff;
                justify-content: space-between;
            }
            .th{
                color:#19f7ff;
            }
            .tr,
            .th{
                margin-bottom: 10px;
            }
            .td{
                text-align: center;
                width: 33%;

            }
        }
    }
  }

  // 图标的公共样式，类似标题之类的
  .graph{
      position: relative;
      margin-right : 10px;

      &-title{
          color: #fff;
          font-size: 18px;
          padding:3px 5px;
          margin-bottom: 5px;
          text-align: center;
      }

      &-subtitle{
          color: #fff;
          font-size: 16px;
          padding:3px;
          padding-left: 10px;
          position: relative;
          &:before {
              content: '';
              display: block;
              width: 2px;
              height: 12px;
              background-color: $primary-color;
              position: absolute;
              top: 6px;
              left: 0;
          }
      }

      &-complete {
          width: 10%;

          i{
              font-size: 30px;
              margin-bottom: 5px;
          }
          p{
              text-align: center;
          }
      }

      &-line {
          width: 100%;
          height: 56%;
          margin-top: 12px;
      }

      &:last-child{
          flex-grow: 1;
          margin-right : 0;
      }
      &>div{
          position: absolute;
      }
  }

  // 底部四个图片的样式
  .graph-group{
    display: flex;
    justify-content: space-between;
    margin : 0 1%;

    img{
        width: 100%;
    }

    .lyzt{
      width: 90%;
      height: 92%;
      left: 5%;
      top: 4%;
      color: #fff;

      &-sec {
        display: flex;
        justify-content: space-between;

        div span{
          color:#21edff;
          margin-left: 3px;
        }
      }
      &-item{
        height: 77%;
        display: flex;
        justify-content: space-between;

        div:nth-child(1){
          flex:1;
        }

        div:nth-child(2){
          flex:2;
        }

        &-title{
          margin-top: 10px;
        }

        &-content{
          margin-top: 3px;
          color: #21edff;
        }
      }
    }

    .wsyq{
      width: 90%;
      height: 90%;
      left: 5%;
      top: 5%;

      &-sec-num{
        color: #21edff;
      }
      &-item{
        display: flex;
        justify-content: space-between;
        width: 100%;

        p{
          margin: 5px 0;
        }

        &-key {
          p:not(.wsyq-item-title){
            margin-bottom: 12px;
          }

          &-tag{
            color: #74bdd8;
            padding:5px 15px;
            font-size: 14px;
            background:url(~@/assets/static/image/wsyq-lst.png) no-repeat 100% 100%/100% 100%;
          }
        }

        &-title{
          font-weight: bold;
          text-align: center;
        }
      }
    }

    .jtzt{
      width: 90%;
      height: 90%;
      left: 5%;
      top:5%;
    }

    .qtgz{
      width: 90%;
      height: 90%;
      left: 5%;
      top:5%;
    }

    .sjzx{
      width: 90%;
      height: 90%;
      left: 5%;
      top:5%;
    }
  }
}
}

@media screen and (max-width: 1905px) {
	.lyzt-item-title{
		margin-top: 5px;
	}
	.lyzt-item-content{
		margin-top: 3px;
	}
}
@media screen and (max-width: 1640px) {


	.hgjj-list .tr, .th {
	    margin-bottom: 5px !important;
	}
	.lyzt-sec div{
		font-size: 10px;
	}
	.lyzt-item-title{
		margin-top: 5px;
		font-size: 10px;
	}
	.lyzt-item-content{
		margin-top: 3px;
		font-size: 10px;
	}
	.wsyq .wsyq-item-title{
		font-size: 14px;
		margin: 5px 0;
	}
	.wsyq-item-new p:not(.wsyq-item-title){
		font-size: 10px;
	}
	i.tag-up:before,i.tag-down:before{
		width: 5px;
		height: 10px;
	}
	.wsyq-item .wsyq-item-key p:not(.wsyq-item-title){
		margin: 3px!important;
	}
	.wsyq-item-key-tag{
		padding:3px 15px;
		font-size: 9px;
	}
	.el-dropdown,.el-dropdown a{
		font-size: 16px;
	}
}
